<template>
  <view class="working-hours-benefits-container">
    <!-- 标题 -->
    <view class="header">
      <text class="title">工作时间与福利待遇</text>
      <text class="description">
        详细的奖金绩效能让个人更全面的了解薪资状况，不能填写QQ、微信、电话等联系方式，以及特殊符号。
      </text>
    </view>

    <!-- 工作时间 -->
    <view class="section">
      <text class="section-title">工作时间</text>
      <text class="section-content">
        上午9：00-下午6：30 双休 不加班
      </text>
    </view>

    <!-- 员工福利 -->
    <view class="section">
      <text class="section-title">员工福利</text>
      <view class="benefits-list">
        <view class="benefit-item">
          <text class="benefit-title">五险一金</text>
          <text class="benefit-description">
            缴纳养老保险、医疗保险、失业保险、工伤保险、生育保险和住房公积金
          </text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 页面数据
    };
  },
};
</script>

<style scoped>
.working-hours-benefits-container {
  height: 844px;
  padding: 20px;
  background-color: #fff;
}

.header {
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid #ebebeb;
}

.title {
  font-size: 18px;
  font-weight: bold;
  color: #151515;
  display: block;
  margin-bottom: 10px;
}

.description {
  font-size: 14px;
  color: #666;
  line-height: 1.5;
}

.section {
   padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid #ebebeb;
}

.section-title {
  font-size: 16px;
  font-weight: bold;
  color: #151515;
  display: block;
  margin-bottom: 10px;
}

.section-content {
  font-size: 14px;
  color: #666;
  line-height: 1.5;
}

.benefits-list {
  margin-top: 10px;
}

.benefit-item {
  margin-bottom: 15px;
}

.benefit-title {
  font-size: 14px;
  font-weight: bold;
  color: #151515;
  display: block;
  margin-bottom: 5px;
}

.benefit-description {
  font-size: 14px;
  color: #666;
  line-height: 1.5;
}
</style>